<template>
  <a-modal 
    :title="title" 
    :width="800" 
    :visible="visible" 
    :confirmLoading="confirmLoading" 
    cancelText="关闭"
    @ok="closeModal" 
    @cancel="closeModal" 
  >
    <a-spin :spinning="confirmLoading">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" @keyup.enter.native="searchQuery">  
          <a-row :gutter="24">
            <a-col :xl="12" :lg="12" :md="12" :sm="24">
              <a-form-item label="商圈名">
                <a-input placeholder="请输入商圈名" v-model="queryParam.name" ></a-input>
              </a-form-item>
            </a-col>
            <!-- <a-col :xl="12" :lg="12" :md="12" :sm="24">
              <a-form-item label="省">
                <a-select default-value="1" placeholder="全部省" v-model="queryParam.provinceId" @change="provinceIdChange">
                  <a-select-option :value="item.val" v-for="(item, index) in provinceUl" :idt="item.id" :key="index" >{{ item.name }}</a-select-option >
                </a-select>
              </a-form-item>
            </a-col> -->
            <a-col :xl="12" :lg="12" :md="12" :sm="24">
              <a-form-item label="城市">
                <a-select default-value="1" placeholder="全部城市" v-model="queryParam.cityId" >
                  <a-select-option :value="item.val" v-for="(item, index) in cityUl" :idt="item.id" :key="index" >{{ item.name }}</a-select-option >
                </a-select>
              </a-form-item>
            </a-col>
            <!-- <a-col :xl="12" :lg="12" :md="12" :sm="24">
              <a-form-item label="区">
                <a-select default-value="1" placeholder="全部区" v-model="queryParam.districtId" >
                  <a-select-option :value="item.val" v-for="(item, index) in districtUl" :idt="item.id" :key="index" >{{ item.name }}</a-select-option >
                </a-select>
              </a-form-item>
            </a-col> -->
            <a-col :xl="12" :lg="12" :md="12" :sm="24">
              <span style="float: left; overflow: hidden" class="table-page-search-submitButtons" >
                <a-button type="primary" @click="searchQuery" icon="search" >查询</a-button >
                <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px" >重置</a-button >
              </span>
            </a-col>
          </a-row>
        </a-form>
      </div>
      <!-- table区域-begin -->
      <div>
        <a-table 
          ref="table" 
          size="middle" 
          rowKey="id" 
          :columns="tableColumns" 
          :dataSource="tableData" 
          :pagination="ipagination" 
          :loading="loading"   
          @change="handleTableChange">
          <!--操作-->
          <span slot="action" slot-scope="text, record">
            <a-button @click="choose(record)" type="primary">选择</a-button>
          </span>
        </a-table>
      </div>
    </a-spin>
  </a-modal>
</template>

<script>
import ApiTree from "@/api/common/businessArea";
import Merchant from "@/api/merchant/merchantList";
import City from "@/api/common/city";
import { Slime } from '@/mixins/slime';
export default {
  name: 'serviceListModal',
  mixins: [Slime],
  data() {
    return {
      title: '详情',
      merchantId:0,
      tableColumns: [
        { title: "商圈姓名", dataIndex: "name", align: "center" },
        { title: "省份", dataIndex: "provinceName", align: "center" },
        { title: "城市", dataIndex: "cityName", align: "center" },
        { title: "地区", dataIndex: "districtName", align: "center" },
        {
          title: "操作",
          scopedSlots: { customRender: "action" },
          align: "center"
        }
      ],
      tableData: [],
      // provinceUl:[],
      cityUl:[],
      // districtUl:[],
    };
  },
  methods: {
    //初始加载
    open(merchantId) {
      this.merchantId = merchantId
      this.visible = true;
      this.loadData();
      this.cityInit()
    },
    //加载的会员
    loadData(arg) {
      const that = this;
      if (arg === 1) {
        this.ipagination.current = 1;
      }
      this.loading = true;
      let params = this.getQueryParams(); // 查询条件
      ApiTree.getList(params)
        .then((res) => {
          let data = res.result.records;
          this.tableData = data;
          // 页码
          this.ipagination.total = res.result.total;
        })
        .finally(() => {
          this.loading = false;
        });
    },
    //城市初始化
    cityInit(){
      City.getList()
        .then((res) => {
          this.cityUl = res.result.map((obj)=>{
            return obj = {
              val: obj.code,
              name: obj.name,
            }
          })
        })
    },
    // 查
    searchQuery() {
      this.loadData(1);
    },
    // 查 重置
    searchReset() {
      this.queryParam = {};
      this.queryParamRangePicker = null;
      this.loadData(1);
    },
    // provinceIdChange(value,option){
    //   let provinceId = option.data.attrs.idt
    //   City.regionList(provinceId).then((res) => {
    //     let cityUl = []
    //     let data = res.result
    //     data.map((obj)=>{
    //       let li = {
    //         name: obj.name,
    //         id: obj.id,
    //         val: obj.code,
    //       }
    //       cityUl.push(li)
    //     })
    //     this.cityUl = cityUl
    //   })
    // },
    // cityIdChange(value,option){
    //   let cityId = option.data.attrs.idt
    //   City.regionList(cityId).then((res) => {
    //     let districtUl = []
    //     let data = res.result
    //     data.map((obj)=>{
    //       let li = {
    //         name: obj.name,
    //         id: obj.id,
    //         val: obj.code,
    //       }
    //       districtUl.push(li)
    //     })
    //     this.districtUl = districtUl
    //   })
    // },
    //选中商圈
    choose(record) {
      const that = this;
      let param = {
        id: this.merchantId,
        businessAreaId: record.id,
      }
      Merchant.infoUpdate(param)
        .then((res) => {
          if(res.code == 0){
            that.$message.success('操作成功');
          }else{
            that.$message.warning(res.message);
          }
        })
        .finally(() => {
          that.closeModal();
        });
    },
    // 弹窗-关闭
    closeModal() {
      this.visible = false;
      this.$emit('closeModal');
    },
  },
};
</script>

<style scoped>
</style>